<template>
	<div class="tag">
		<div class="tag-div" v-for="(data, index) in tagInfos" :key="index">
			<h3 class="sub-title">{{data.name}}</h3>
			<ul class="btn-container" @click="choiceLi">
				<li v-for="(tagname, index) in data.subTags" :key="index"><a :data-id="tagname.id">{{tagname.name}}</a></li>
			</ul>
		</div>
		<div class="tag-div brand">
			<h3 class="sub-title">推荐品牌</h3>
			<ul class="btn-container" @click="choiceLi('brand')">
				<li v-for="(item, index) in recBrandsList" :key="index"><a :data-id="item.id">{{item.name}}</a></li>
			</ul>
		</div>
		<!-- <div class="tag-div">
			<h3 class="sub-title">价格</h3>
			<ul class="btn-container" @click="choiceLi('price')">
				<li><a data-high="5">5万以下</a></li>
				<li><a data-low="5" data-high="8">5-8万</a></li>
				<li><a data-low="8" data-high="10">8-10万</a></li>
				<li><a data-low="10" data-high="13">10-13万</a></li>
				<li><a data-low="13" data-high="16">13-16万</a></li>
				<li><a data-low="16" data-high="25">16-25万</a></li>
				<li><a data-low="25" data-high="30">25-30万</a></li>
				<li><a data-low="30" data-high="35">30-35万</a></li>
				<li><a data-low="35" data-high="45">35-45万</a></li>
				<li><a data-low="45" data-high="60">45-60万</a></li>
				<li><a data-low="60">60万以上</a></li>
			</ul>
		</div> -->
		<div class="select-btn">
			<div class="btn-fun" @click="clearActive">重置</div>
			<div class="btn-fun" @click="showTruckList" style="width: 60%;">查看结果（共{{truckNums}}个车型）</div>
		</div>
		<scrollTop></scrollTop>
	</div>
</template>

<script>
import { XButton } from 'vux'
import scrollTop from '../../base/scrollTop.vue'
import { mapActions, mapGetters } from 'vuex'
import { debug } from 'util';
export default {
	components: {
		XButton,
		scrollTop
  },
	data () {
		return {
			ids: [],
			brandId: ''
		}
	},
	methods:{
		...mapActions('screen',[
			'getTagsInfo',
			'getTruckNums'
		]),
		...mapActions('brand',[
			'getRecBrands'
		]),
		choiceLi (type) {
			var e = e || window.event
			if (e.target.nodeName !== 'A') return
			let lis = e.target.parentElement.parentElement.children
			for (let i = 0; i < lis.length; i ++) {
				lis[i].children[0].classList.remove('li-active')
			}
			e.target.classList.add('li-active')
			let lisAcive = ''
			if (type === 'brand') {
				lisAcive = document.querySelectorAll('.brand .li-active')
				for (let li of lisAcive) {
					this.brandId = li.dataset.id
				}
			} else {
				lisAcive = document.querySelectorAll('.li-active')
				this.ids = []
				for (let li of lisAcive) {
					this.ids.push(li.dataset.id)
				}
			}
			this.getTruckNums({tagid: this.ids, brand_id: this.brandId})
		},
		/**
			* 重置
			*/
		clearActive () {
			var li = document.querySelectorAll('.li-active')
			for (var i in li) {
				if (li[i].classList) {
					li[i].classList.remove('li-active')
				}
			}
			this.ids = []
			this.getTruckNums()
		},
		/**
		* 查看筛选卡车列表
		*/
		showTruckList () {
			this.$router.push({path:'/select/truckList', query: {tagid: this.ids, brand_id: this.brandId}})
		}
	},
	computed:{
		...mapGetters('screen',[
			'tagInfos',
			'truckNums'
		]),
		...mapGetters('brand',[
			'recBrandsList'
		])
	},
	mounted () {
		this.getTagsInfo()
		this.getTruckNums()
		this.getRecBrands()
	}
}
</script>

<style lang = 'scss' scoped>
.rec-brand-wrap {
	flex-wrap: wrap;
}
.rec-brand-item {
	padding: 0.26667rem 0.26667rem 0.26667rem;
	width: 25%;
	text-align: center;
	border-bottom: 1px solid #f5f5f5;
}
.btn-container {
	padding: 5px;
	overflow: hidden;
	background: #fff;
	li {
		width: 25%;
		float: left;
    height: 32px;
    box-sizing: border-box;
    margin: 5px 0;
		padding: 0 5px;
		a {
			display: block;
			height: 0.8rem;
			line-height: 0.8rem;
			background: #fff;
			padding: 0 3px;
			text-align: center;
			font-size: 0.32rem;
			color: #333;
			border: 1px solid #eee;
			border-radius: 4px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
	.li-active {
		background-color: #0090ff;
    color: #fff;
	}
}
.select-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1.22667rem;
	text-align: center;
	background-color: #EEE;
	.btn-fun {
		background-color: #FF6F00;
		color: #fff;
		text-align: center;
		margin: 5px 7px;
		float: left;
		width: 30%;
		border-radius: 5px;
		height: 1rem;
		line-height: 1rem;
	} 
}
.tag-div:last-child {
	margin-bottom:1.22667rem;
}
</style>